<template>
  <div class="all">
    <div class="ipt" @click="isSearchOk = false">
      <div>
        <div class="img-left">
          <img
            src=""
            alt=""
          />
        </div>
        <input
          ref="input"
          :disabled="isSearchOk"
          v-model="searchText"
          @input="searchHandler"
          @keydown.enter="searchFindHandler"
          type="text"
          placeholder="搜索歌曲、歌手、专辑"
        />
        <div @click="clearIpnut" v-show="searchText" class="img-right">
          <img
            src=""
            alt=""
          />
        </div>
      </div>
    </div>
    <div v-if="!showSearch" class="show-all">
      <div class="show-first" v-if="!searchText">
        <div class="show-hot">
          <div class="title">热门搜索</div>
          <div class="hot-tags">
            <div
              v-for="hotTag in hotList"
              :key="hotTag.first"
              class="tags-item"
              @click="searchFindHandler({ text: hotTag.first })"
            >
              {{ hotTag.first }}
            </div>
          </div>
        </div>
        <div class="historys">
          <div
            v-for="historyItem in historySearch"
            :key="historyItem.id"
            class="historys-item"
          >
            <div class="img-history">
              <img
                src=""
                alt=""
              />
            </div>
            <div class="item-right">
              <div
                @click="searchFindHandler({ text: historyItem })"
                class="search-text"
              >
                {{ historyItem }}
              </div>
              <div
                @click="deleteHistoryHandler(historyItem)"
                class="img-delete"
              >
                <div>
                  <img
                    src=""
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="show-second" v-else>
        <div class="show-second-text">搜索"{{ searchText }}"</div>
        <div class="show-second-lists">
          <div
            class="show-second-lists-item"
            v-for="matchItem in allMatch"
            :key="matchItem.keyword"
          >
            <div class="img-search">
              <img
                src=""
                alt=""
              />
            </div>
            <div
              @click="searchFindHandler({ text: matchItem.keyword })"
              class="item-text"
            >
              {{ matchItem.keyword }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="show-search">
      <div
        class="show-search-best"
        v-if="searchFindList?.length > 0 && isGotList"
        @click.stop="toSingerDetail"
      >
        <div class="title">最佳匹配</div>
        <div class="best-item">
          <div class="item-img">
            <img
              :src="
                searchFindList[0].al?.picUrl ||
                searchFindList[0].artists[0].img1v1Url
              "
              alt=""
            />
          </div>
          <div class="item-text">
            <div class="my-text text-first">
              <span>歌名: </span>
              <span class="color-mark">{{ searchFindList[0]?.name }}</span
              >:<span style="margin-left: 0.05rem">{{
                searchFindList[0].al?.name
              }}</span>
            </div>
            <div class="text-act color-mark">
              by
              {{
                searchFindList[0]?.ar
                  ? searchFindList[0]?.ar[0]?.name
                  : searchFindList[0].artists[0].name
              }}
            </div>
          </div>
          <div class="item-img-right">
            <img
              src=""
              alt=""
            />
          </div>
        </div>
      </div>
      <WaitLoad v-else />
      <div class="show-search-list">
        <ListComponent
          @addToListenList="$emit('addToListenList', searchFindList)"
          v-for="findItem in searchFindList"
          :key="findItem.id"
          :listItem="findItem"
          :songId="songId"
          :isStop="$attrs.isStop"
        />
      </div>
    </div>
  </div>
</template>

<script>
import ListComponent from "@/components/ListComponent.vue";
import WaitLoad from "@/components/WaitLoad.vue";
export default {
  name: "SearchView",
  components: {
    ListComponent,
    WaitLoad,
  },
  props: {
    songId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      jumpSearhHandler: false,
      showSearch: false,
      timer: null,
      searchText: "",
      hotList: [],
      historySearch: [],
      allMatch: [],
      searchFindList: [],
      isSearchOk: false,
      isGotList: false,
    };
  },
  watch: {
    historySearch: {
      handler(val) {
        localStorage.setItem("historySearch", JSON.stringify(val));
      },
      deep: true,
    },
    showSearch: {
      handler(vla) {
        console.log(vla);
      },
    },
  },
  methods: {
    clearIpnut() {
      this.searchText = "";
      this.showSearch = false;
      this.isSearchOk = false;
    },
    searchHandler() {
      clearTimeout(this.timer);
      if (this.searchText == "" || this.jumpSearhHandler) return;
      this.showSearch = false;
      this.timer = setTimeout(async () => {
        let result = await this.axios.get(
          `/search/suggest?keywords= ${this.searchText}&type=mobile`
        );
        if (result.status == 200) {
          let { allMatch } = result.data.result;
          this.allMatch = allMatch;
        }
      }, 500);
    },
    deleteHistoryHandler(historyItem) {
      this.historySearch = this.historySearch.filter(
        (item) => item != historyItem
      );
    },
    async searchFindHandler(obj) {
      if (obj && obj.text) this.searchText = obj.text;
      if (this.searchText == "" || this.isSearchOk) return;
      this.jumpSearhHandler = true;
      this.showSearch = true;
      let tempList = [
        this.searchText,
        ...this.historySearch.map((value) => value),
      ];
      this.historySearch = [...new Set(tempList)];
      let result = await this.axios.get(`/search?keywords=${this.searchText}`);
      if (result.status == 200) {
        let { songs } = result.data.result;
        this.searchFindList = songs;
        this.showSearch = true;
        this.jumpSearhHandler = false;
        this.$nextTick(() => {
          this.$refs.input.blur();
        });
        console.log(this.searchFindList);
        this.isGotList = true;
      }
      this.isSearchOk = true;
    },
    toSingerDetail() {
      // console.log(this.searchFindList[0]?.ar[0]?.id);
      // let id = null;
      // if(this.searchFindList[0].al||this.searchFindList[0]?.artists){
      //   id =this.searchFindList[0]?.ar[0]?.id || this.searchFindList[0]?.artists[0].id;
      // }
      // if (!id) {
      //   this.$router.push({
      //     path: "/playlist",
      //     query: {
      //       id: this.searchFindList[0].id,
      //     },
      //   });
      //   return;
      // }
      this.$router.push({
        path: "/singer",
        query: {
          id:
            this.searchFindList[0]?.ar[0]?.id ||
            this.searchFindList[0].artists[0].id,
        },
      });
    },
  },
  mounted() {
    this.$refs.input.focus();
  },
  updated() {
    this.$refs.input.focus();
  },
  async created() {
    if (localStorage.getItem("historySearch")) {
      this.historySearch = JSON.parse(localStorage.getItem("historySearch"));
    }
    let result = await this.axios.get("/search/hot");
    if (result.status == 200) {
      let { hots } = result.data.result;
      this.hotList = hots;
    }
  },
};
</script>

<style lang="scss" scoped>
.color-mark {
  color: #507daf !important;
}
.all {
  background-color: #fbfcfd;
}
.show-all {
  font-size: 0.14rem;
  .show-first {
    width: 100%;
    box-sizing: border-box;
    .show-hot {
      padding: 0.15rem 0.1rem 0;
      .title {
        font-size: 0.12rem;
        color: #666;
        margin-bottom: 0.08rem;
      }
      .hot-tags {
        display: flex;
        flex-wrap: wrap;
        .tags-item {
          height: 0.32rem;
          padding: 0 0.14rem;
          border-radius: 0.16rem;
          border: 0.01rem solid #e4e4ee;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 0.1rem;
          margin-bottom: 0.1rem;
          box-sizing: border-box;
        }
      }
    }
    .historys {
      width: 100%;
      box-sizing: border-box;
      .historys-item {
        width: 100%;
        height: 0.45rem;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .img-history {
          width: 0.15rem;
          height: 0.15rem;
          overflow: hidden;
          margin: 0 0.1rem;
        }
        .item-right {
          display: flex;
          flex-grow: 1;
          justify-content: space-between;
          align-items: center;
          box-sizing: border-box;
          height: 100%;
          border-bottom: 0.01rem solid rgba($color: #ccc, $alpha: 0.25);
          .search-text {
            flex-grow: 1;
            color: #333;
          }
          .img-delete {
            width: 0.45rem;
            height: 0.45rem;
            overflow: hidden;
            margin-left: 0.1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            > div {
              width: 0.12rem;
              height: 0.12rem;
            }
          }
        }
      }
    }
  }
  .show-second {
    font-size: 0.15rem;
    width: 100%;
    box-sizing: border-box;
    padding-left: 0.1rem;
    .show-second-text {
      display: flex;
      align-items: center;
      height: 0.5rem;
      color: #507daf;
    }
    .show-second-lists-item {
      height: 0.45rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .img-search {
        width: 0.15rem;
        height: 0.15rem;
        margin-right: 0.07rem;
      }
      .item-text {
        flex-grow: 1;
        height: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-right: 0.1rem;
        border-bottom: 0.01rem solid rgba($color: #ccc, $alpha: 0.3);
      }
    }
  }
}
.show-search {
  width: 100%;
  box-sizing: border-box;
  .show-search-best {
    padding-left: 0.1rem;
    font-size: 0.17rem;
    color: #333;
    box-sizing: border-box;
    padding: 0.08rem 0 0.04rem 0;
    .title {
      font-size: 0.12rem;
      color: #666;
    }
    .best-item {
      height: 0.66rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0.08rem 0.1rem 0.08rem 0.1rem;
      border-bottom: 0.01rem solid rgba($color: #ccc, $alpha: 0.2);
      .item-img {
        width: 0.5rem;
        min-width: 0.5rem;
        height: 0.5rem;
      }
      .item-text {
        flex-grow: 1;
        height: 100%;
        margin-left: 0.1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        > div {
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
        .text-act {
          font-size: 0.12rem;
          color: #999;
        }
      }
      .item-img-right {
        width: 0.08rem;
        height: 0.13rem;
        margin: 0 0.08rem 0 0.1rem;
      }
    }
  }
  .show-search-list {
    position: relative;
    z-index: 1;
  }
}
.ipt {
  color: #333;
  width: 100%;
  height: 0.6rem;
  padding: 0.15rem 0.1rem;
  box-sizing: border-box;
  border-bottom: 0.02rem solid #f3f3f4;
  > div {
    position: relative;
  }
  .img-left {
    position: absolute;
    width: 0.13rem;
    height: 0.13rem;
    left: 0.1rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
  }
  .img-right {
    position: absolute;
    width: 0.14rem;
    height: 0.14rem;
    right: 0.1rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
  }
  input {
    width: 100%;
    height: 0.3rem;
    box-sizing: border-box;
    border-radius: 0.15rem;
    outline: none;
    // text-indent: 0.3rem;
    padding: 0 0.3rem;
    background-color: #ebecec;
    border: none;
    font-size: 0.14rem;
  }
}
</style>